<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" slot="detail"  :rules="validatorRules">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="所属试卷" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="examinationPaperId">
              <j-dict-select-tag type="list" v-model="model.examinationPaperId" style="width: 100%"
                                 dictCode="ach_examination_paper,examination_paper_name,id" placeholder="请输入所属试卷" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="科目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subjectId">
              <a-select v-model="model.subjectId" placeholder="请选择所属科目" style="width: 100%"
                        :getPopupContainer="(target) => target.parentNode">
                <a-select-option v-for="item in subjectList" :key="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" style="margin-bottom:10px" v-for="(item, index) in orderMainModel.mainCustomerList" :key="index" >
          <div style="width: 100%;background-color: rgb(239 239 239);border-radius: 2px;padding-top: 10px;">
            <div><span style="font-weight: bold;font-size: 15px;margin-left: 10px;color: #00A0E9;"> 分项项目: {{ index + 1 }}</span></div>
            <a-col :span="12">
              <a-form-model-item label="题型编码[必填]" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemCode" >
                <a-input v-model="item.exaPapProItemCode" placeholder="请输入考试题型编码(必填)" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="题型名称[必填]" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemName">
                <a-input v-model="item.exaPapProItemName" placeholder="请输入考试题型名称" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" style='float: left'>
              <a-form-model-item label="题型满分[必填]" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemFullMarks">
                <a-input-number v-model="item.exaPapProItemFullMarks" placeholder="请输入题型满分" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="题型序号[必填]" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemOrder">
                <a-input-number v-model="item.exaPapProItemOrder" placeholder="请输入题型序号" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="题型分类[必填]" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemTtype">
                <!--              <a-input v-model="model.exaPapProItemTtype" placeholder="请输入项目类型（项目类型（1总分项、2分项、3分项子项））"  ></a-input>-->
                <j-dict-select-tag type="list" v-model="item.exaPapProItemTtype"  style="width: 100%"
                                   dictCode="exa_pap_pro_item_ttype" placeholder="请输入题型类型（分项类型（1总分项、2分项、3分项子项）" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="主客类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemSubTtype">
                <!--              <a-input v-model="model.exaPapProItemSubTtype" placeholder="主客类型（1 2分项：21客观 21主观 23实验实操 24运动）"  ></a-input>-->
                <j-dict-select-tag type="list" v-model="item.exaPapProItemSubTtype"  style="width: 100%"
                                   dictCode="exa_pap_pro_item_sub_ttype" placeholder="请输入主客类型" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" style='border-top: 1px solid #d9d9d9;padding-top: 10px;'>
              <a-form-model-item label="级别(默认一级)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemLevel">
                <!--              <a-input-number v-model="model.exaPapProItemLevel" placeholder="请输入项目级别（1一级默认，2二级，3三级）" style="width: 100%" />-->
                <j-dict-select-tag type="list" v-model="item.exaPapProItemLevel"  style="width: 100%"
                                   dictCode="exa_pap_pro_item_level" placeholder="请输入题型级别" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12"  style='border-top: 1px solid #d9d9d9;padding-top: 10px;'>
              <a-form-model-item label="上级题型（默认0）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="exaPapProItemFatherId">
                <a-input-number v-model="item.exaPapProItemFatherId" placeholder="请输入上级题型（默认0）" style="width: 100%" />
              </a-form-model-item>
            </a-col>

<!--            <a-col :span="12">-->
<!--              <a-form-model-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="izOpen">-->
<!--                <j-dict-select-tag type="list" v-model="item.izOpen = defaultText.izOpen"  style="width: 100%"-->
<!--                                   dictCode="iz_open" placeholder="请选择是否启用" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="12">-->
<!--              <a-form-model-item label="是否删除" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="delFlag = 0">-->
<!--                <j-dict-select-tag type="list" v-model="item.delFlag = defaultText.delFlag"  style="width: 100%"-->
<!--                                   dictCode="del_flag" placeholder="请选择是否删除" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
            <!--          <a-col :span="24">-->
            <!--            <a-form-model-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">-->
            <!--              <a-input v-model="model.createBy" placeholder="请输入创建人"  ></a-input>-->
            <!--            </a-form-model-item>-->
            <!--          </a-col>-->
            <!--          <a-col :span="24">-->
            <!--            <a-form-model-item label="修改人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="updateBy">-->
            <!--              <a-input v-model="model.updateBy" placeholder="请输入修改人"  ></a-input>-->
            <!--            </a-form-model-item>-->
            <!--          </a-col>-->
            <a-col :span="24">
              <a-form-model-item style="text-align: center;width: 100%">
                <a-button type="dashed" style="margin-top: 10px" @click="delRowCustom(index)">
                  <a-icon type="minus-circle" /> 删除题型
                </a-button>
              </a-form-model-item>
            </a-col>
          </div>
        </a-row>
      <a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowCustom()">
        <a-icon type="plus" /> 添加题型分项
      </a-button>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { getSubjectList, getAllAchExaminationPaperList} from '@api/achievementCommonAPI'

  export default {
    name: 'AchExamPaperProjectItemForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //动态增加表单
    },
    data () {
      return {
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        confirmLoading: false,
        url: {
          add: "/achexampaperprojectitem/achExamPaperProjectItem/add",
          edit: "/achexampaperprojectitem/achExamPaperProjectItem/edit",
          queryById: "/achexampaperprojectitem/achExamPaperProjectItem/queryById"
        },
        achExaminationPaperList: [],
        subjectList: [],

        //动态增加表单
        orderMainModel: {
          mainCustomerList: [{}],
          jeecgOrderTicketList: [{}]
        },
        //新增时默认值设置
        defaultText: {
          examinationPaperId: "",//赋值一次，第一次下拉选择
          subjectId: "",//赋值一次，第一次下拉选择

          izOpen: 1,
          delFlag: 0,
        },


      }
    },
    computed: {
      formDisabled(){
        return this.disabled;
      },
      validatorRules:function() {
        return {
          examinationPaperId:[{ required: true, message: '请选择所属试卷!' }],
          subjectId:[{ required: true, message: '请选择科目!' }],

          exaPapProItemCode: [{ required: true, message: '请输入题型编码!' }],
          exaPapProItemName: [{ required: true, message: '请输入题型名称!' }],
          exaPapProItemFullMarks:[{ required: true, message: '请输入题型满分!' }],

          exaPapProItemTtype: [{ required: true, message: '请选择总分分类!' }],
          exaPapProItemSubTtype: [{ required: true, message: '请选择题型类型!' }],
          exaPapProItemLevel:[{ required: true, message: '请选择题型级别!' }],

          exaPapProItemOrder:[{ required: true, message: '请输入题型序号!' }],
          exaPapProItemFatherId:[{ required: true, message: '请输入上级题型!' }],
          izOpen: [{ required: true, message: '请选择是否开启!' }],
          delFlag: [{ required: true, message: '请输入删除类型!' }],
        }
      },

    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getAchExaminationPaperData();
      this.getSubjectData();
      //动态增加表单
      this.form = this.$form.createForm(this)
    },
    methods: {
      //objectModel 从AchExamPaperProjectItemList的传过来的选择的数据（需要的是试卷id和科目id）
      add (objectModel) {
        this.modelDefault.examinationPaperId = objectModel.id
        this.modelDefault.subjectId = objectModel.subjectId

        this.modelDefault.delFlag = 0,//默认正常（0未删除 1删除）
        this.modelDefault.izOpen = 1,//默认启用（1启用 0未启用）

        this.edit(this.modelDefault);
      },
      edit (record) {

        //编辑时默认值
        this.defaultText.examinationPaperId = record.examinationPaperId
        this.defaultText.subjectId = record.subjectId

        this.model = Object.assign({}, record);
        this.orderMainModel.mainCustomerList.length = 0;//编辑时设默认表单为0
        this.orderMainModel.mainCustomerList.push(this.model);//push后表单为当前编辑的一个
        this.visible = true;
      },
      submitForm () {
        //动态增加表单数据，循环依次新增
        if (this.orderMainModel.mainCustomerList.length > 0){
          this.orderMainModel.mainCustomerList.forEach((item, index) => {
            this.model = item
            //提交表单数据
            const that = this;
            // 触发表单验证
            this.$refs.form.validate(valid => {
              if (valid) {
                that.confirmLoading = true;
                let httpurl = '';
                let method = '';
                if(!this.model.id){
                  //心中默认值
                  this.model.examinationPaperId = this.modelDefault.examinationPaperId
                  this.model.subjectId = this.modelDefault.subjectId
                  this.model.izOpen = this.modelDefault.izOpen
                  this.model.delFlag = this.modelDefault.delFlag

                  httpurl+=this.url.add;
                  method = 'post';
                }else{
                  httpurl+=this.url.edit;
                  method = 'put';
                }
                httpAction(httpurl,this.model,method).then((res)=>{
                  if(res.success){
                    that.$message.success(res.message);
                    that.$emit('ok');
                  }else{
                    that.$message.warning(res.message);
                  }
                }).finally(() => {
                  that.confirmLoading = false;
                })
              }
            })
          });
        }
        //提交完后清空缓存动态表单数据，一面影响下次数据
        this.orderMainModel.mainCustomerList = [{}]
      },
      async getSubjectData() {
        let res = await getSubjectList()
        this.subjectList = []
        res.result.records.forEach(item => {
          this.subjectList.push({
            label: item.subjectName,
            value: item.id
          })
        })
      },
      async getAchExaminationPaperData() {
        let res = await getAllAchExaminationPaperList()
        this.achExaminationPaperList = []
        let data = res.result.records
        data.forEach(item => {
          this.achExaminationPaperList.push({
            label: item.examinationPaperName,
            value: item.id
          })
        })
      },

      //动态增加表单
      // 初始化
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.orderMainModel.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            httpAction(httpurl,this.orderMainModel,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })

          }
        })
      },
      handleCancel () {
        this.close()
      },
      addRowCustom () {
        this.orderMainModel.mainCustomerList.push({});
        this.$forceUpdate();
      },
      delRowCustom (index) {
        console.log(index)
        let all = this.orderMainModel
        all['mainCustomerList'].splice(index,1);
        this.orderMainModel.mainCustomerList.splice(index,1);
        this.$forceUpdate();
      },
      addRowTicket () {
        this.orderMainModel.jeecgOrderTicketList.push({});
        // console.log(this.orderMainModel.jeecgOrderTicketList)
        this.$forceUpdate();
      },
      delRowTicket (index) {
        // console.log(index)
        let all = this.orderMainModel
        all['jeecgOrderTicketList'].splice(index,1);
        this.orderMainModel.jeecgOrderTicketList.splice(index,1);
        this.$forceUpdate();
      },


    }
  }
</script>

<style scoped>

</style>